<template>
  <div class="container-swiper">
    <div class="main">
      <div class="left"></div>
      <div class="right"></div>
      <div class="bottom"></div>
      <div class="content">
        <div class="swiper-container" ref="mysWipper">
          <div
            class="swiper-slide"
            :class="{ rotates: showRote }"
            v-for="(item, index) in photos"
            :data="item.name"
            @click="geturl(index)"
          >
            <div>
              <div class="s-img"><img :src="item.img" alt="" /></div>
              <div class="s-text">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer></footer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
let photos = ref([
  {
    name: "高标准农田综合大数据平台",
    img: new URL("@/assets/img/system_inlet_01.png", import.meta.url).href,
    isRedirect: true,
    url: "http://124.70.6.124:8062/",
  },
  {
    name: "高标准农田建管服一体化平台",
    img: new URL("@/assets/img/system_inlet_02.png", import.meta.url).href,
    url: "01",
    isRedirect: false,
  },
  {
    name: "高标准农田管护系统",
    img: new URL("@/assets/img/system_inlet_03.png", import.meta.url).href,
    url: "01",
    isRedirect: false,
  },
  {
    name: "高标准农田物联网平台",
    img: new URL("@/assets/img/system_inlet_04.png", import.meta.url).href,
    url: "http://124.70.6.124:8063/",
    isRedirect: true,
  },
  {
    name: "高标准农田专家服务平台",
    img: new URL("@/assets/img/system_inlet_05.png", import.meta.url).href,
    url: "07",
    isRedirect: false,
  },
  {
    name: "高标准农田冀农兴服务APP",
    img: new URL("@/assets/img/system_inlet_06.png", import.meta.url).href,
    url: "07",
    isRedirect: false,
  },
]);
let showRote = ref(false);

function geturl(index: number) {
  let item = photos.value[index];
  if (!item.isRedirect) {
    let url = "/?systemId=" + item.url;
    window.location.href = url;
  } else {
    window.location.href = item.url;
  }
}
onMounted(() => {
  setTimeout(() => {
    showRote.value = true;
  }, 1000);
});
</script>
<style scoped lang="scss">
@import "./index";
</style>
